<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <!-- 点击头像，上传文件 -->
      <van-cell title="头像" is-link center @click="showUpload = true">
      <!-- <van-cell title="头像" is-link center @click="$refs.iptFile.click()"> -->
        <template #default>
          <van-image round class="avatar" :src="profile.photo"/>
          <!-- file 选择框 -->
        <!-- <input
          type="file"
          ref="iptFile"
          v-show="false"
          accept="image/*"
          @change="onFileChange"
        /> -->
        </template>
      </van-cell>
      <!-- 用户昵称 -->
      <van-cell title="昵称" :value="profile.name" is-link  @click="showChangeName"/>
      <!-- 用户生日 -->
      <van-cell title="生日" :value="profile.birthday" is-link @click="showDate = true" />
    </van-cell-group>

    <van-popup v-model="showUpload" position="bottom" :style="{ height: '6%' }">
      <van-uploader :after-read="afterRead" :before-read="beforeRead" :max-size="5 * 1024 * 1024" @oversize="onOversize">
        <van-button class="upload-button" type="primary" :loading="loading">上传头像</van-button>
      </van-uploader>
    </van-popup>

    <van-dialog v-model="showName" title="修改昵称" show-cancel-button :before-close="onNameDialogBeforeClose">
        <van-field v-model="userName" input-align="center" maxlength="7" placeholder="请输入名称" v-myfocus/>
    </van-dialog>
    <van-popup v-model="showDate" position="bottom" style="height: 50%" round>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          :show-toolbar="true"
          v-if="showDate"
          @confirm="getBirthday"
          @cancel="showDate = false"
        />
    </van-popup>
  </div>
</template>

<script>
import { userProfileAPI, updatePhotoAPI, updateProfileAPI } from '@/api/index'
import dayjs from 'dayjs'
export default {
  name: 'UserEdit',
  data () {
    return {
      profile: {}, // 个人信息
      showUpload: false, // 上传头像
      loading: false, // 是否显示为加载状态
      showName: false, // 显示修改姓名的弹窗
      userName: '', // 编辑用户名
      showDate: false, // 显示时间选择面板
      currentDate: new Date(2022, 3, 21), // 当前时间
      minDate: new Date(1930, 0, 1), // 最小时间
      maxDate: new Date(2022, 3, 21) // 最大时间
    }
  },
  methods: {
    // 获取个人信息
    async getUserProfile () {
      const res = await userProfileAPI()
      this.profile = res.data.data
    },
    /* ==================文件上传相关的方法========== */
    // 上传文件
    async afterRead (file) {
      if (file !== null) {
        this.loading = true
        const fd = new FormData()
        fd.append('photo', file.file) // photo在表单里参数名携带
        const res = await updatePhotoAPI(fd)
        console.log(res)
        if (res.data.data.photo.length !== 0) {
          // 关闭文件上传弹窗层
          this.loading = false
          this.showUpload = false
          this.profile.photo = res.data.data.photo // 更新最新头像
        }
      }
    },
    // 上传前校验
    beforeRead (file) {
      if (file.type === 'image/jpeg' || file.type === 'image/png') {
        return true
      } else {
        this.$toast({
          message: '请上传jps/png格式文件！'
        })
      }
    },
    // 选择文件后
    async onFileChange (event) {
      console.log(event.target.files)
      if (event.target.files.length === 0) return // 防止用户未选择图片
      const fd = new FormData()
      fd.append('photo', event.target.files[0]) // photo在表单里参数名携带
      const res = await updatePhotoAPI(fd)
      console.log(res)
      this.profile.photo = res.data.data.photo // 更新最新头像
    },
    // 限制文件大小
    onOversize (file) {
      this.$toast({
        message: '文件的大小超出5mb的限制'
      })
    },
    /* =====================end====================== */
    // 修改昵称
    showChangeName () {
      this.userName = this.profile.name
      this.showName = true
    },
    async onNameDialogBeforeClose (action, done) {
      // action是区分点击的是确认还是取消
      if (action === 'confirm') {
        // 确定
        // unicode编码 \u4092
        // url编码 %E2%C3%D1
        if (/^[A-Za-z0-9\u4e00-\u9fa5]{1,7}$/.test(this.userName)) {
          // 通过校验
          // 调用接口
          await updateProfileAPI({
            userName: this.userName
          })
          // 更新页面显示的名字
          this.profile.name = this.userName
          // 关闭弹窗
          done()
        } else {
          // 提示用户
          this.$notify({ type: 'warning', message: '用户名中英文和数字1-7位' })
          // 阻止弹窗关闭
          done(false)
        }
      } else if (action === 'cancel') {
        // 取消
        done()
      }
    },
    // 修改生日
    async getBirthday () {
      this.showDate = false
      // 调用接口修改生日日期
      await updateProfileAPI({
        birthday: dayjs(this.currentDate).format('YYYY-MM-DD')
      })
      // 更新页面显示的生日日期
      this.profile.birthday = dayjs(this.currentDate).format('YYYY-MM-DD')
    }
  },
  created () {
    this.getUserProfile()
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
.upload-button {
  width: 100vw;
}
.date-time-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
